class CarInfoList extends React.Component {
    constructor(props) {
        super(props);
        this.count = 0;
        this.page = 1;
        this.state = {
            list: '',
            enteringCarMap: {},
            enteringCarMapView: {}
        }
    }

    componentDidMount() {
        this.updateList(1, 10);
    }

    updateList(page, pageSize) {
        let param = {};
        param.page = page;
        param.pageSize = pageSize;
        param.plateNumber = this.refs.plateNumber.value;
        param.type_code = this.props.typeCode;
        param.parkId = this.refs.parkSelectList.getDefValue();
        param.timeStart = this.refs.normalDate.rangeStart;
        param.timeEnd = this.refs.normalDate.rangeEnd;
        postJson('/car/carEnteringRecord/queryEnteringRecordList.x', $.param(param), (data) => {
            this.page = param.page;
            this.count = data.size;
            this.setState({
                list: data.list
            });
        })
    }

    tbody() {
        if (this.state.list) {
            return this.state.list.map((array) => {
                return (<tr>
                    <td>{array.plateNumber}</td>
                    <td>{array.cardType === 2 ? '月卡' : '临时卡'}</td>
                    <td>{array.bussinessType === 1 ? "进场" : "出场"}</td>
                    <td>{array.time}</td>
                    <td>{array.period}</td>
                </tr>)
            })
        }
    }

    carInfo(id) {

    }

    selectParkCallback(value) {
        this.updateList(1, 10);
    }

    selectCommCallback(commCode) {
        this.refs.parkSelectList.queryList(commCode);
    }

    seeEnteringCar(isModal) {
        let parkId = this.refs.parkSelectList.getDefValue();
        if (!parkId) {
            layui.layer.msg("请先选择停车场！");
            return;
        }


        postJson('/car/carEnteringRecord/queryCarEnteringRecord.x', {
            parkId: parkId,
            plateNumber: this.refs.queryInput.value
        }, (data) => {
            this.state.enteringCarMap = data.data;
            this.queryEnteringCar(() => {
                if (isModal) {
                    this.refs.modal_see_entering_car.show();
                }
            });
        });
    }

    queryEnteringCar(callback) {
        let plateNumber = this.refs.queryInput.value;
        if (plateNumber) {
            this.state.enteringCarMapView = {};
            if (this.state.enteringCarMap[plateNumber])
                this.state.enteringCarMapView[plateNumber] = this.state.enteringCarMap[plateNumber];
        } else {
            this.state.enteringCarMapView = this.state.enteringCarMap;
        }
        if (callback) {
            this.setState({}, () => callback());
        }
    }

    deleteEnteringCar(plateNumber) {
        let parkId = this.refs.parkSelectList.getDefValue();
        layui.layer.confirm('确定要删除该场内车辆记录吗？', (index) => {
            postJson("/car/carEnteringRecord/deleteCarEntering.x", {
                parkId: parkId,
                plateNumber: plateNumber
            }, () => {
                this.seeEnteringCar();
                layui.layer.msg("场内车辆记录删除成功!");
            });
            layui.layer.close(index);
        });

    }

    enteringCarView() {
        let view = [];
        for (let key in this.state.enteringCarMapView) {
            view.push(<li
                data-id={key}
                key={key}
                style={{
                    height: '30px',
                    lineHeight: '30px',
                    padding: '0 5px 0 10px',
                    border: "solid 1px #e6e6e6",
                    margin: "10px 0 10px 0",
                    borderRadius: "0 2px 2px 0",
                    fontSize: '15px'
                }}
            >{key}
                <div style={{
                    lineHeight: '30px',
                    float: 'right'
                }}>
                    <i className="layui-icon"
                       style={{fontSize: '20px', marginLeft: '5px'}}
                       onClick={() => this.deleteEnteringCar(key)}>&#xe640;</i>
                </div>
            </li>)
        }
        return view;
    }

    render() {
        return <Frame header="车辆出入记录"
                      headerBtns={
                          <HeaderBtn onClick={() => this.seeEnteringCar(true)}><i className="fa fa-eye"/>&nbsp;
                              查看场内车辆</HeaderBtn>
                      }>

            <Form type="pane">
                <Item>
                    <label className="layui-form-label">查询时间</label>
                    <DateSelect placeHolder="不填表示查询1个月内数据" range={true} ref="normalDate"/>
                </Item>
                <Item>
                    <LayuiCommSelect
                        formLabelName="小区选择"
                        mask={['building', 'unit', 'floor', 'room']}
                        ref="buildingSelectList"
                        onChangeComm={(comm) => this.selectCommCallback(comm)}/>
                    <label className="layui-form-label">停车场选择</label>
                    <ParkSelectList ref="parkSelectList" isNotItem={true}
                                    selectCallback={(value) => this.selectParkCallback(value)}/>
                    <label className="layui-form-label">车牌号</label>
                    <div className="layui-input-inline">
                        <Input type="text" ref="plateNumber"/>
                    </div>
                    <Button btnType="normal" onClick={() => this.updateList(1, 10)}>查询</Button>
                </Item>

                <Item>
                    <Table ref="table" count={this.count}
                           pageOnClick={(page, pageSize) => this.updateList(page, pageSize)}>
                        <thead>
                        <tr>
                            <th width="150">车牌号</th>
                            <th>卡类型</th>
                            <th>出入类型</th>
                            <th>出入时间</th>
                            <th width="90">停车时长</th>
                        </tr>
                        </thead>
                        <tbody>
                        {this.tbody()}
                        </tbody>
                    </Table>
                </Item>
            </Form>

            <Modal title={'场内车辆（' + Object.keys(this.state.enteringCarMap).length + '）'} ref="modal_see_entering_car">
                <Form type="pane"
                      size="sm"
                >
                    <Item>
                        <Label>车牌查询</Label>
                        <ButtonInput ref="queryInput" size="sm"
                                     onClick={() => this.seeEnteringCar()}/>
                    </Item>
                    <Item>
                        <ul style={{
                            border: "solid 1px #e6e6e6",
                            padding: '0 10px 0 10px',
                            overflow: 'auto',
                            width: '306px',
                            maxHeight: '500px',
                            listStyle: 'none'
                        }}>
                            {this.enteringCarView()}
                        </ul>
                    </Item>
                </Form>
            </Modal>
        </Frame>
    }
}

ReactDOM.render(
    <CarInfoList/>,
    document.getElementById('example')
);
